<template>
  <div style="width: 80%; height: 100%">
    <ElementDialog ref="dialog" embed :visible="visible" title="消息管理列表">
      <SkeletonPanel>
        <template #left>
          <ElTree
            default-expand-all
            :data="treeData1"
            :props="default_tree_props"
            :expand-on-click-node="false"
            @node-click="handleNodeClick" />
        </template>

        <div style="padding: 6px 10px; text-align: right">
          <ElInput v-model="searchForm.subject" style="width: 200px; margin-right: 10px" placeholder="请输入标题" />
          <ElButton type="primary" @click="search">搜索</ElButton>
        </div>
        <div style="padding: 4px 10px; color: #2d8cf0; text-align: right; background-color: #ebeef5">
          <span style="cursor: pointer" @click="showDrawer = true">高级搜索</span>
        </div>
        <PageableTable
          ref="PageableTable"
          :api="getPage"
          style="height: 700px"
          :multiple="false"
          :selection="true"
          @current-change="handleCurrentChange">
          <TableColumn prop="subject" label="标题" />
          <TableColumn prop="doctype" label="文档类型" />
          <TableColumn prop="ctiName" label="分类名称" />
          <TableColumn prop="timelimitType" label="完成时限">
            <template #default="{ row }">
              <p v-if="row.timelimitType === '0'">长期坚持</p>
              <p v-if="row.timelimitType === '1'">周期完成</p>
            </template>
          </TableColumn>
          <TableColumn prop="mode" label="提醒方式">
            <template #default="scope">
              <p>{{ formatMode(scope.row) }}</p>
            </template>
          </TableColumn>
          <TableColumn prop="startdate" label="开始时间" />
          <TableColumn prop="enddate" label="结束时间" />
        </PageableTable>
      </SkeletonPanel>
      <template #footer>
        <ElButton type="primary" @click="getMessageManagement">确定</ElButton>
      </template>
    </ElementDialog>

    <ElDrawer :visible.sync="showDrawer" title="高级搜索" append-to-body>
      <ElForm ref="form" :model="searchForm" label-width="80px" label-position="right">
        <ElRow class="form-row">
          <ElCol :span="12">
            <ElFormItem prop="subject" label="标题">
              <ElInput v-model="searchForm.subject" placeholder="请输入标题" />
            </ElFormItem>
          </ElCol>
        </ElRow>
        <ElRow>
          <ElCol :span="24" style="text-align: center">
            <ElButton type="primary" @click="search">搜索</ElButton>
            <ElButton @click="closeShowDrawer">取消</ElButton>
          </ElCol>
        </ElRow>
      </ElForm>
    </ElDrawer>
  </div>
</template>

<script>
  import SkeletonPanel from '@/components/ui/SkeletonPanel'
  import { fetchDlgSelectPage } from '@/api/message/messagemanagement'
  import { tree } from '@/api/message/messagecti'

  export default {
    name: 'SelectMessageManagement',
    components: { SkeletonPanel },
    props: {
      visible: Boolean
    },
    data() {
      return {
        showDrawer: false,
        treeData1: [],
        default_tree_props: { label: 'name', value: 'id' },
        tableData: [],
        searchForm: {
          subject: ''
        },
        currentRow: {}
      }
    },
    created() {
      this.init()
    },
    methods: {
      init() {
        tree().then(response => {
          this.treeData1 = response.data.data
        })
      },
      getPage(page) {
        return fetchDlgSelectPage({ current: page.page, size: page.limit })
      },
      handleCurrentChange(rows) {
        this.currentRow = rows
      },
      getMessageManagement() {
        if (this.$isBlank(this.currentRow)) {
          this.$message.warning('请选择消息信息！')
          return
        }
        this.$emit('getMessageManagement', this.currentRow)
        this.$refs.dialog.hide()
      },
      handleNodeClick(data) {
        fetchDlgSelectPage({ current: 1, size: 25, ctiId: data.id }).then(response => {
          this.$refs.PageableTable.records = response.data.data.records
          this.$refs.PageableTable._data.page.total = response.data.data.total
        })
      },
      search(params) {
        fetchDlgSelectPage(
          Object.assign(
            {
              current: 1,
              size: 25
            },
            params,
            this.searchForm
          )
        ).then(response => {
          this.tableData = response.data.data.records
          this.$refs.PageableTable._data.page.total = response.data.data.total
        })
      },
      formatMode(row) {
        let mode = ''
        const modeArray = { 0: '短信', 1: '系统消息', 2: '邮件' }
        let index = 0
        row.mode.split(',').forEach(s => {
          mode = mode + (index !== 0 ? ',' : '') + modeArray[s]
          index++
        })
        return mode
      },
      closeShowDrawer() {
        this.showDrawer = false
      }
    }
  }
</script>
